<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background: #d7f1f1;;
        }
    .main-box1 {
        position: absolute;
        /* background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(49, 204, 252, 0.4)); */
        /* background-color: red; */
        width: 100%;
        height: 100px;
        padding: 0%;
        margin: 0%;
        top: 100px;
        left: 10px;
        display: flex;
        justify-content: space-between;

    }

    .main-box1 a {
        text-decoration: none;
    }

    .main-box1>div {
        margin: 0% 20px;
    }

    .main-box2 {
        position: absolute;
        /* background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(49, 204, 252, 0.4)); */
        /* background-color: red; */
        width: 100%;
        height: 100px;
        padding: 0%;
        margin: 0%;
        top: 250px;
        left: 10px;

        display: flex;
        justify-content: space-between;

    }

    .main-box2 a {
        text-decoration: none;
    }

    .main-box2>div {

        margin: 0% 20px;
    }


    .main-box3 {
        position: absolute;
        /* background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(49, 204, 252, 0.4)); */
        /* background-color: red; */
        width: 100%;
        height: 100px;
        padding: 0%;
        margin: 0%;
        top: 400px;
        left: 10px;
        display: flex;
        justify-content: space-between;

    }

    .main-box3 a {
        text-decoration: none;
    }

    .main-box3>div {
        margin: 0% 20px;
    }

    .top {
        position: absolute;
        /* background-color: rgb(38, 229, 226); */
        width: 100%;
        height: 395px;
        padding: 0%;
        margin: 0%;
        top: 0px;
        left: 10px;
    }

    .F {
        position: absolute;
        right: 100px;

    }
.icon{
    width: 30px;
    height: 30px;

}
    </style>
</head>

<body>
    <main>
        <div class="top">

        </div>
        <div class="F">
            <input type="text" name="select_id_request" placeholder="请输入您想要查找的功能" id="select_id_request">
            <input type="submit" value="查询">
        </div>
        <div class="main-box1">
            <div>
                <img class="icon" src="./img/成绩查询，查询.png">
                <p>
                    <a href=""   >成绩查询</a>
                </p>
            </div>
            <div>
                  <img class="icon" src="./img/课程表.png">
                <p>
                    <a href=""   >课程表</a>
                </p>
            </div>
            <div>
                  <img class="icon" src="./img/作业提交.png">
                <p>
                    <a href=" "   >作业提交</a>
                </p>
            </div>
            <div>
                  <img class="icon" src="./img/考试安排.png">
                <p>
                    <a href=" "   >考试安排</a>
                </p>
            </div>
            <div>
                  <img class="icon" src="./img/活动日历.png">
                <p>
                    <a href=" "   >活动日历</a>
                </p>
            </div>
            <div>
                  <img class="icon" src="./img/联系老师.png">
                <p>
                    <a href=" "   >联系老师</a>
                </p>
            </div>
        </div>
        <div class="main-box2">
            <div>
                  <img class="icon" src="./img/教室借用.png">
                <p>
                    <a href=" "   >教室借用</a>
                </p>
            </div>
            <div>
                  <img class="icon" src="./img/班级群聊.png">
                <p>
                    <a href=" "   >班级群聊</a>
                </p>
            </div>
            <div>
                  <img class="icon" src="./img/通知公告.png">
                <p>
                    <a href=" "   >通知公告</a>
                </p>
            </div>
            <div>
                  <img class="icon" src="./img/学生风采.png">
                <p>
                    <a href=""   >学生风采</a>
                </p>
            </div>
            <div>
                  <img class="icon" src="./img/校园新闻.png">
                <p>
                    <a href=""   >校园新闻</a>
                </p>
            </div>
            <div>
                  <img class="icon" src="./img/班级活动.png">
                <p>
                    <a href=""   >班级活动</a>
                </p>
            </div>
        </div>
        <div class="main-box3">
            <div>
                  <img class="icon" src="./img/资料下载.png">
                <p>
                    <a href=""   >资料下载</a>
                </p>
            </div>
            <div>
                  <img class="icon" src="./img/成绩统计.png">
                <p>
                    <a href=""   >成绩统计</a>
                </p>
            </div>
            <div>
                  <img class="icon" src="./img/反馈建议.png">
                <p>
                    <a href=" "   >反馈建议</a>
                </p>
            </div>
            <div>
                  <img class="icon" src="./img/反馈建议.png">
                <p>
                    <a href=" "   >反馈建议</a>
                </p>
            </div>
            <div>
                  <img class="icon" src="./img/其他功能.png">
                <p>
                    <a href=" "   >其他功能</a>
                </p>
            </div>
            <div>
                  <img class="icon" src="./img/反馈建议.png">
                <p>
                    <a href=" "   >反馈建议</a>
                </p>
            </div>
        </div>
    </main>

</body>

</html>